merge: branch 'badges'

1 files changed, 64 insertions, 0 deletions

diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
new file mode 100644
index 00000000..858e6aec
--- /dev/null
+++ b/src/routes/user/[user]/+page.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { user, type User } from '$lib/AniList/user';
+	import { onMount } from 'svelte';
+
+	export let data;
+
+	let userData: User | undefined = undefined;
+
+	onMount(() => {
+		user(data.username).then((profile) => {
+			userData = profile;
+		});
+	});
+
+	// 8.5827814569536423841e0
+</script>
+
+{#if userData === null}
+	Could not load user profile for <a
+		href={`https://anilist.co/user/${data.username}`}
+		target="_blank">@{data.username}</a
+	>.
+
+	<p />
+
+	Does this user exist?
+{:else if userData === undefined}
+	Loading ...
+{:else}
+	<div class="user-grid">
+		<p>
+			<a
+				href={`https://anilist.co/user/${userData.name}`}
+				target="_blank"
+				title={String(userData.id)}
+			>
+				<img src={userData.avatar.large} alt="" width="100vw" />
+			</a>
+		</p>
+
+		<div>
+			<p>
+				<a
+					href={`https://anilist.co/user/${userData.name}`}
+					target="_blank"
+					title={String(userData.id)}>@{userData.name}</a
+				>
+				• <a href={`/user/${userData.name}/badges`}>Badge Wall</a>
+			</p>
+
+			This user has watched {(userData.statistics.anime.minutesWatched / 60 / 24).toFixed(1)} days of
+			anime and read
+			{((userData.statistics.manga.chaptersRead * 8.58) / 60 / 24).toFixed(1)} days of manga.
+		</div>
+	</div>
+{/if}
+
+<style>
+	.user-grid {
+		display: flex;
+		flex-wrap: wrap;
+		column-gap: 1.5em;
+	}
+</style>